<template>
  <el-dialog
    v-if="visible"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :width="width+'%'"
    top="2vh"
    :before-close="close"
    class="wp-detail-panel"
  >
    <div class="wp-panel-header">
      <div>
        <div class="wp-panel-header__desc">采购订单</div>
        <div>{{ purchaseOrderInfo.purchaseNo }}</div>
      </div>
      <div>
        <template v-if="purchaseOrderInfo.status ===0 || purchaseOrderInfo.status ===2">
        <el-button @click.native="submitOrder(purchaseOrderInfo.purchaseNo)" type="success">提 交</el-button>
        <el-button @click.native="cancelOrder(purchaseOrderInfo.purchaseNo)" type="warning">作 废</el-button>
        </template>
          <template v-else-if="purchaseOrderInfo.status ===1">
          <el-button @click.native="completedOrder(purchaseOrderInfo.purchaseNo)" type="success">完 成</el-button>
           <el-button @click.native="rejectOrder(purchaseOrderInfo.purchaseNo)" type="warning">驳 回</el-button>
          </template>
        <el-button @click.native="close" type="danger">关 闭</el-button>
      </div>
    </div>
     <el-descriptions class="header-descriptions-item" direction="vertical" :column="4">
      <el-descriptions-item label="客户名称">{{ purchaseOrderInfo.supplierName||'--' }}</el-descriptions-item>
      <el-descriptions-item label="订单金额">{{ purchaseOrderInfo.purchaseAmount||'--' }}</el-descriptions-item>
      <el-descriptions-item label="实际订单金额">{{ purchaseOrderInfo.purchaseActualAmount||'--' }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">{{ purchaseOrderInfo.statusName||'--' }}</el-descriptions-item>
    </el-descriptions>
    <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
      <el-tab-pane  name="1" :key="k1">
        <span slot="label"><i class="el-icon-date"></i> 基本信息</span>
        <Base-info :param="purchaseOrderInfo.purchaseNo" :orderInfoData.sync="purchaseOrderInfo" :canModify="canModify" @editAfter="refreshList"/>
      </el-tab-pane>
      <el-tab-pane lazy name="2" :key="k2">
        <span slot="label"><i class="el-icon-date"></i> 产品</span>
        <Product-info  :param="purchaseOrderInfo" :height="300" :canModify="canModify" :orderActualAmount.sync="purchaseOrderInfo.purchaseActualAmount" @editAfter="refreshList" :isCreate="false"/>
      </el-tab-pane>
      <el-tab-pane lazy name="3" :key="k3">
        <span slot="label"><i class="el-icon-date"></i> 入库</span>
        <Stock-info  :param="purchaseOrderInfo.purchaseNo" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import BaseInfo from './detial/BaseInfo'
import ProductInfo from './detial/productInfo'
import StockInfo from './detial/StockInfo'
import Mixins from './mixins'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    width: { type: Number, default: 80 },
    data: Object
  },
  mixins: [Mixins],
  watch: {
    show (val) {
      this.visible = val
    },
    visible (val) {
      this.$emit('update:show', val)
    },
    data: {
      handler (val) {
        this.purchaseOrderInfo = val
      },
      deep: true,
      immediate: true
    }
  },
  components: { BaseInfo, ProductInfo, StockInfo },
  data () {
    return {
      id: 'order_detail',
      visible: this.show,
      tabKey: '',
      purchaseOrderInfo: this.data || {},
      activeName: '1',
      canModify: false,
      k1: 1,
      k2: 2,
      k3: 3
    }
  },
  methods: {
    handleTabClick (tab, event) {
      if (tab.name === '1') {
        this.k1 = Math.random()
      } else if (tab.name === '2') {
        this.k2 = Math.random()
      } else if (tab.name === '3') {
        this.k3 = Math.random()
      }
    },
    close () {
      this.visible = false
    },
    open (data) {
      this.activeName = '1'
      this.visible = true
      this.purchaseOrderInfo = data
      if (data) {
        this.canModify = (data.status === 0 || data.status === 2)
      }
    },
    refreshList () {
      this.$parent.initPageList()
    },
    submitOrder (purchaseNo) {
      this.$msgBox.confirm('确认提交采购单', () => {
        this.requestOption('submitOrder', purchaseNo, (res) => {
          this.close()
          this.refreshList()
        })
      })
    },
    rejectOrder (purchaseNo) {
      this.$msgBox.confirm('确认驳回订单', () => {
        this.requestOption('rejectOrder', purchaseNo, (res) => {
          this.close()
          this.$parent.initPageList()
        })
      })
    },
    completedOrder (purchaseNo) {
      this.$msgBox.confirm('确认订单完成', () => {
        this.requestOption('completedOrder', purchaseNo, (res) => {
          this.close()
          this.$parent.initPageList()
        })
      })
    },
    cancelOrder (purchaseNo) {
      this.$prompt('请输入作废原因', '作废订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: function (v) {
          if (!v || v === undefined || v === '') {
            return '不能为空'
          }
        }
      }).then(({ failureReason }) => {
        this.requestOption('cancelOrder', {purchaseNo, failureReason}, (res) => {
          this.close()
          this.$parent.initPageList()
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-detail-panel >>> .el-dialog__header {
  display: none;
}
.wp-panel-header,
.wp-panel-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
  &__desc {
    font-size: 14px;
    color: #000;
    margin-bottom: 2px;
  }
  &__value {
    font-size: 13px;
    color: #666;
  }
}
.wp-panel-info {
  width: 80%;
  &__desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
  }
}
</style>
